<template>
    <div class="successInfoHint">
        <el-row>
            <el-col :span="20" :offset="1">
                <div class="text_center width30">
                    <div class="el-form-item-span-wrap">
                        <span class="el-form-item-span-label">账户类别:</span>
                        <span class="el-form-item-span">{{CardSuccessInfo.CATEGORY_filter}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20" :offset="1">
                <div class="text_center width30">
                    <div class="el-form-item-span-wrap">
                        <span class="el-form-item-span-label">卡号:</span>
                        <span class="el-form-item-span">{{CardSuccessInfo.body.appBody.CARDNBR}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20" :offset="1">
                <div class="text_center width30">
                    <div class="el-form-item-span-wrap">
                        <span class="el-form-item-span-label">预计下次账单日:</span>
                        <span class="el-form-item-span">{{nextCYNBR_val | filterDateYYYYMMDD}}</span>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <slot name="HintBody"></slot>
        </el-row>
        <el-row>
            <el-col :span="20" :offset="1">
                <div class="text_span text_center">{{pageTitle}}交易成功！</div>
            </el-col>
        </el-row>
        <div class="text_center margin_top20">
            <!-- <el-button
                type="primary"
                size="small"
                @click="handleClose"
                icon="el-icon-circle-check"
            >确定</el-button>-->
            <el-button type="primary" size="small" @click="handleClickbtn">修改记录查询</el-button>
            <el-button size="small" @click.native="handleClose">关闭</el-button>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { closePage, getBusinessMenuId } from '@/utils/Common';
import moment from 'moment';
export default {
    name: 'ModifyVillingDateItem',
    props: {
        //成功数据
        CardSuccessInfo: {
            type: Object,
        },
        // 页面标题文字
        pageTitle: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            nextCYNBR_val: '',
            MenuId: '',
        };
    },
    filters: {
        filterDateYYYYMMDD: (value) => {
            value = (`${value}`).trim();
            if (value === '00000000') return value;
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },
    },
    computed: mapState({
        businessMenu: state => state.menu.businessMenu,
    }),
    mounted() {
        console.log('CardSuccessInfo', this.CardSuccessInfo);
        this.getNextData();
    },
    methods: {
        // 判断是否有时间回显
        getNextData() {
            const EFFDAY_value = (this.CardSuccessInfo.body.appBody.EFFDAY);
            if (EFFDAY_value != 0) {
                this.nextCYNBR_val = EFFDAY_value
            } else {
                this.nextCYNBR_val = this.CardSuccessInfo.nextCYNBR;
            }

        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
        handleClickbtn() {
            this.MenuId = getBusinessMenuId('/businessSystem/accountCardDetaileQuery', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'accountCardDetaileQuery', path: '/businessSystem/accountCardDetaileQuery', params: { id: this.MenuId } });
        }

    },
};
</script>
<style lang='scss'>
.successInfoHint {
    .text_span {
        margin: 15px 20px;
        font-size: 16px;
    }
    .text_fl {
        margin-bottom: 5px;
    }
    .el-form-item-span-wrap {
        margin: 2px;
    }
}
</style>
